import { Callout } from "nextra/components";
import { Tabs } from "nextra/components";
import { TailoredExperience, LinkToCopilotCloud } from "@/components";
import SelfHostingCopilotRuntimeCreateEndpoint from "@/snippets/self-hosting-copilot-runtime-create-endpoint.mdx";
import SelfHostingCopilotRuntimeConfigureCopilotKitProvider from "@/snippets/self-hosting-copilot-runtime-configure-copilotkit-provider.mdx";


# Quickstart: Chatbot
<TailoredExperience.Toggle />

## Getting Started

<TailoredExperience.CloudContent>

  ### Configure the CopilotKit Provider

  First, you must wrap all components that interact with your copilot with the [`<CopilotKit />`](/reference/components/CopilotKit) provider.

  Additionally, let's use the [`<CopilotSidebar />`](/reference/components/CopilotSidebar) UI component to display the copilot chat sidebar. Some other options you can choose from are [`<CopilotPopup />`](/reference/components/CopilotPopup) and [`<CopilotChat />`](/reference/components/CopilotChat).
  
  <Callout type="info">
    <LinkToCopilotCloud>Click here to get your Copilot Cloud API key for free</LinkToCopilotCloud>. Then, replace `<your-public-api-key>` with your actual API key.
  </Callout>

  ```tsx filename="layout.tsx" showLineNumbers /<your-public-api-key>/
  "use client";

  import { CopilotKit } from "@copilotkit/react-core";
  import { CopilotSidebar } from "@copilotkit/react-ui";
  import "@copilotkit/react-ui/styles.css";

  export default function RootLayout({children}) {
    return (
      <CopilotKit publicApiKey="<your-public-api-key>">
        <CopilotSidebar>
          {children}
        </CopilotSidebar>
      </CopilotKit>
    );
  }
  ```
</TailoredExperience.CloudContent>

<TailoredExperience.SelfHostContent>
  ### Step 1: Set up Copilot Runtime Endpoint

  <SelfHostingCopilotRuntimeCreateEndpoint />

  ### Step 2: Configure the CopilotKit Provider

  <SelfHostingCopilotRuntimeConfigureCopilotKitProvider />
</TailoredExperience.SelfHostContent>


## Copilot Readable State

You likely want to provide state knowledge to the copilot. You can achieve this by using the [`useCopilotReadable`](/reference/hooks/useCopilotReadable) hook.

```tsx filename="YourComponent.tsx" showLineNumbers {1,7-10}
import { useCopilotReadable } from "@copilotkit/react-core";

export function YourComponent() {
  const { employees } = useEmployees();

  // Define Copilot readable state
  useCopilotReadable({
    description: "List of available users",
    value: users,
  });

  return (
    <>...</>
  );
}
```

## Let the Copilot take action

Aside from being aware of the state, you can make your copilots even more powerful by allowing them to take actions. You can achieve this by using the [`useCopilotAction`](/reference/hooks/useCopilotAction) hook.

```tsx filename="YourComponent.tsx" showLineNumbers {13-25} /useCopilotAction/1
import { useCopilotReadable, useCopilotAction } from "@copilotkit/react-core";

export function YourComponent() {
  const { employees, selectEmployee } = useEmployees();

  // Define Copilot readable state
  useCopilotReadable({
    description: "List of available users",
    value: users,
  });

  // Define Copilot action
  useCopilotAction({
    name: "Select an employee",
    description: "Select an employee from the list",
    parameters: [
      {
        name: "employeeId",
        type: "string",
        description: "The ID of the employee to select",
        required: true,
      }
    ],
    handler: async ({ employeeId }) => selectEmployee(employeeId),
  });

  return (
    <>...</>
  );
}
```

## Next Steps

We highly recommend checkout out our simple [AI Todo List Copilot Tutorial](/tutorial-ai-todo-list-copilot/overview) to learn more about CopilotKit.
